Vue.component("sgin",{
    template:`
        <span>
            <slot name="nologin" v-if="!myinfo">
                <a @click="showEditor = true">登录</a>
                <a href="props.regHtml">注册</a>
                <a @click="showForget = true">忘记密码</a>
            </slot>
             <slot name="logined" v-else v-bind:myinfo="myinfo">
                <a href="#">欢迎:{{myinfo.name}}</a>
                 <a href="/sgin/logout">退出</a>
            </slot>
        <span/>
        <el-dialog title="登录窗口" :visible.sync="showEditor" width="600px">
            <el-form :inline="true" label-position="left" style="flex:none;">
                <el-form-item label="账号:" label-width="80px">
                    <el-input v-model="username" placeholder="请输入账号" style="width: 420px"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="密码:" label-width="80px">
                    <el-input v-model="password" placeholder="请输入密码" type="password" style="width: 420px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showEditor = false;username='';password=''">取 消</el-button>
                <el-button type="primary" @click="login()">确 定</el-button>
            </div>
        </el-dialog>
        
        <el-dialog title="忘记密码" :visible.sync="showForget" width="600px">
            <el-steps :space="200" :active="0" align-center>
              <el-step title="步骤1" ></el-step>
              <el-step title="步骤2" ></el-step>
              <el-step title="步骤3" ></el-step>
            </el-steps>
            <hr>
            <div v-if="forgetStep == 0">
                <el-form label-position="left" style="flex:none;width: 60%;margin:auto ">
                    <el-form-item label="账号:" label-width="80px">
                        <el-input v-model="username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: end">
                    <el-button @click="getForgetEmailCode">获取邮箱验证码</el-button>
                </div>
            </div>
            <div v-else-if="forgetStep == 1">
                <el-form label-position="left" style="flex:none;width: 60%;margin:auto ">
                    <el-form-item label="新密码:" label-width="80px">
                        <el-input v-model="username" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                     <el-form-item label="确认密码:" label-width="80px">
                        <el-input v-model="username" placeholder="请输入确认密码"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: end">
                    <el-button @click="forgetStep++">重置密码</el-button>
                </div>
            </div>
            <div v-else>
                <h3 style="text-align: center">修改成功</h3>
                <div style="text-align: end">
                    <el-button @click="forgetStep=0;showForget = false">关闭</el-button>
                </div>
            </div>
        </el-dialog>
    `,
    data(){
        return{
            username:"",
            password:"",
            showEditor:false,
            showForget:false,
            props:{},
            myinfo:{},
            forgetStep:0
        };
    },
    methods:{
        login(){
            let p = new URLSearchParams();
            p.append("username",this.username);
            p.append("password",this.password);
            axios.post(
                "sgin/login",
                p
            ).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.username="";
                    this.password="";
                    this.getMyinfo();
                    this.showEditor =false;
                }else{
                    this.$alert(res.data.msg);
                }
            });
        },
        getMyinfo(){
            axios.get("sgin/myinfo").then(res=>{
                this.myinfo = res.data.data;
                //注册自定义事件
                this.$emit("login",this.myinfo);
            });
        },
        getForgetEmailCode(){
            axios.get("sgin/forgetEmail?username="+this.username).then(res=>{
                if(res.data.code==1){
                    axios.get("vcode/email?title=忘记密码验证码&email="+res.data.data).then(resp=>{
                        if(resp.data.code==1){
                            this.$alert(resp.data.msg);
                            this.forgetStep++;
                        }
                    });
                }else{
                    this.$alert(res.data.msg);
                }
            });
        }
    },
    created(){
        axios.get("sgin/props").then(res=>this.props = res.data);
        this.getMyinfo();
    }
})